import React, { Component } from 'react';
import { StyleSheet, Text, View, TouchableOpacity, Image, ScrollView } from "react-native";
import { GLOBAL } from '../../../config/global';
import { PageStatusIndex } from '../../../component/page-status/PageStatusIndex';
import { API, API_GENERATE } from '../../../config/api';
import HTTP from '../../../utils/http';
import { style } from '../../../theme/style';
import { Common } from '../../../component/common/Common.js';
import { DashLine } from '../../../components/common/DashLine';
import MethodUtil from '../../../utils/MethodUtil';
import { NavigationEvents } from 'react-navigation';

const scale = GLOBAL.SCALE;
const billIcon = require('../../../imgs/bill/bill.png');
const waveImg = require('../../../imgs/bill/wave.png');

export class BillDetailPage extends Component {
  static navigationOptions = ({ navigation, navigationOptions }) => {
    const { title } = navigation.state.params;
    return {
      headerTitle: title + '详情',
      headerTintColor: style.color.white,
      headerLeft: <Common type="headLeft" onPress={() => { navigation.goBack() }} color='#fff' />,
      headerRight: (<Image style={style.head.headRightEmpty} source={require('../../../imgs/goBackEmpty.png')} />),
      headerStyle: style.head.headerStyle,
      headerStyle: {  // 头部整体样式 
        elevation: 0,
        backgroundColor: '#892424',
        borderBottomWidth: 0
      },
      headerTitleStyle: {
        flex: 1,
        textAlign: 'center',
      }
    }
  };

  constructor(props) {
    super(props)
    this.state = {
      status: 'data'
    }
  }


  initPage = async () => {
    this.pageParams = this.props.navigation.state.params || {};
    const { data } = this.pageParams || {};
    const { invoiceId } = data || {};

    this.setState({
      status: 'loading'
    })
    let res = await HTTP.POST(API_GENERATE(API.GET_INVOICE_DETAIL), { invoiceId }); // TODO
    this.setState({
      status: res ? 'data' : 'error',
      detail: res
    })
  }

  render() {
    let { status, detail } = this.state;
    const { items } = detail || {};
    const { data, companyType, title } = this.pageParams || {};
    const { invoiceId, invoiceNo, invoiceCode, buyerName, sellerName, invocieDate, totalAmt, invoiceClassStr, taxAmt } = data || {};
    return (
      <View style={styles.container}>
        <NavigationEvents onWillFocus={() => {
          this.initPage();
        }} />
        <ScrollView style={{ paddingLeft: 12 * scale, paddingRight: 12 * scale }}>
          <View style={styles.billWrap}>
            <View style={{ paddingBottom: 20 * scale }}>
              <View style={styles.headerWrap}>
                <Text style={styles.headerText}>增值税专用发票</Text>
                <Image style={styles.headerIcon} source={billIcon} />
              </View>

              <View style={styles.commonItem}>
                <Text style={styles.commonTitle}>付款方</Text>
                <Text style={styles.commonText}>{buyerName}</Text>
              </View>
              <View style={styles.commonItem}>
                <Text style={styles.commonTitle}>收款方</Text>
                <Text style={styles.commonText}>{sellerName}</Text>
              </View>

              <View style={{ paddingLeft: 12 * scale, paddingRight: 12 * scale, paddingTop: 6 * scale, paddingBottom: 6 * scale }}>
                <DashLine dashStyle={{ backgroundColor: '#D8D8D8' }} />
              </View>

              <View style={styles.commonItem}>
                <Text style={styles.commonTitle}>发票金额</Text>
                <Text style={[styles.commonText, { color: '#892424', fontWeight: 'bold', opacity: 1 }]}>¥ {MethodUtil.toThousands(totalAmt, 2)} </Text>
              </View>
              <View style={styles.commonItem}>
                <Text style={styles.commonTitle}>发票号码</Text>
                <Text style={styles.commonText}>{invoiceNo || '-'}</Text>
              </View>
              <View style={styles.commonItem}>
                <Text style={styles.commonTitle}>发票代码</Text>
                <Text style={styles.commonText}>{invoiceCode || '-'}</Text>
              </View>
              <View style={styles.commonItem}>
                <Text style={styles.commonTitle}>开票日期</Text>
                <Text style={styles.commonText}>{invocieDate && invocieDate.substring(0, 10) || '-'}</Text>
              </View>
              <View style={styles.commonItem}>
                <Text style={styles.commonTitle}>发票类型</Text>
                <Text style={styles.commonText}>{invoiceClassStr || '-'}</Text>
              </View>
              <View style={styles.commonItem}>
                <Text style={styles.commonTitle}>业务组织</Text>
                <Text style={styles.commonText}>{this.pageParams && this.pageParams.choice.corpName || '-'}</Text>
              </View>
              <View style={styles.commonItem}>
                <Text style={styles.commonTitle}>总税额</Text>
                <Text style={styles.commonText}>{MethodUtil.toThousands(taxAmt, 2) || 0}</Text>
              </View>

            </View>
            <View style={{ height: 10 * scale, backgroundColor: '#E8E5E5' }}></View>

            <View style={styles.billInfoWrap}>
              <Text>发票明细</Text>
              {
                items && items.length ?
                  items.map((item, index) => {
                    const { quantity, price, taxRate, taxAmt, amount, goodsName } = item || {};
                    return (
                      <View key={index} style={styles.billItem}>
                        <Text style={styles.goodsName}>{goodsName}</Text>
                        <View style={styles.billSection}>
                          <Text style={styles.commonText}>数量(吨)</Text>
                          <Text style={styles.commonText}>单价(元/吨)</Text>
                          <Text style={styles.commonText}>税率</Text>
                          <Text style={styles.commonText}>税额</Text>
                        </View>
                        <View style={[styles.billSection, { marginTop: 4 * scale, marginBottom: 10 * scale }]}>
                          <Text style={styles.commonText}>{quantity || 0}</Text>
                          <Text style={styles.commonText}>{MethodUtil.toThousands(price, 2) || 0}</Text>
                          <Text style={styles.commonText}>{taxRate || 0}</Text>
                          <Text style={styles.commonText}>{MethodUtil.toThousands(taxAmt, 2) || 0}</Text>
                        </View>
                        <Text style={styles.commonText}>总金额（元）：{MethodUtil.toThousands(amount, 2) || 0}</Text>
                        {index + 1 == items.length ? null : < DashLine dashStyle={{ backgroundColor: '#D8D8D8' }} />}
                      </View>
                    )
                  })
                  : <PageStatusIndex status={status} onErrorPress={() => this.initPage()} />
              }
            </View>

            <Image style={styles.waveImg} source={waveImg} />
          </View>

          <TouchableOpacity activeOpacity={1} style={{ flexDirection: 'row', justifyContent: 'center', marginTop: 20 * scale, paddingBottom: 38 * scale }} onPress={() => {
            this.props.navigation.navigate('AccountDetailPage', {
              invoiceId,
              companyType,
              selectedName: title,
              choice: this.pageParams.choice || {}
            })
          }}>
            <Text style={{ color: '#fff' }}>查看关联的结算单 >></Text>
          </TouchableOpacity>
        </ScrollView>
      </View>
    )
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#892424',
  },
  billWrap: {
    backgroundColor: '#fff',
    width: '100%',
    borderRadius: 4 * scale,
    marginTop: 20 * scale,
    position: 'relative',
  },
  headerWrap: {
    height: 76 * scale,
    flexDirection: 'row',
    justifyContent: 'center',
    position: 'relative'
  },
  headerText: {
    color: '#641010',
    fontSize: 16 * scale,
    fontWeight: 'bold',
    marginTop: 20 * scale
  },
  headerIcon: {
    width: 86 * scale,
    height: 42 * scale,
    position: 'absolute',
    left: '50%',
    marginLeft: -43 * scale,
    top: 12 * scale,
    zIndex: -1,
  },
  commonItem: {
    flexDirection: 'row',
    alignItems: 'center',
    paddingLeft: 18 * scale,
    paddingRight: 18 * scale,
    height: 35 * scale,
  },
  commonTitle: {
    minWidth: 60 * scale,
    textAlign: 'right',
    marginRight: 20 * scale,
    fontSize: 13 * scale
  },
  commonText: {
    fontSize: 13 * scale,
    opacity: .8,
    flex: 1
  },
  billInfoWrap: {
    paddingLeft: 24 * scale,
    paddingRight: 12 * scale,
    paddingTop: 16 * scale,
    paddingBottom: 16 * scale,
  },
  billItem: {
    paddingTop: 20 * scale,
    paddingBottom: 14 * scale
  },
  billSection: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
  },
  goodsName: {
    fontSize: 16 * scale,
    fontWeight: 'bold',
    marginBottom: 14 * scale,
  },
  waveImg: {
    width: '100%',
    height: 8 * scale,
    position: 'absolute',
    bottom: 0 * scale,
    left: 0,
  },
})

